<div class="row my-row-standard">
    <div class="col-xs-3">
        <a href="#/images" class="btn btn-block btn-lg btn-default">Back to images</a>
    </div>
    <div class="col-xs-9"></div>
</div>

<div ng-file-drop>

    <div class="row">

        <div class="col-xs-12">

            <h3>Select files</h3>

            <p class="img-comment small-margin"><strong>Note:</strong> available only images: jpg|png|jpeg|bmp|gif.</p>

            <div ng-show="uploader.isHTML5">
                <!-- 3. ng-file-over | ng-file-over="className" -->
                <!--<div class="well my-drop-zone" ng-file-over>
                    Base drop zone
                </div>-->

                <!-- Example: ng-file-drop | ng-file-drop="options" -->
                <div class="well my-drop-zone" ng-file-over="another-file-over-class">
                    Drop files here or press "Select file" if your browser does not support drop zones
                </div>
            </div>

            <!-- 2. ng-file-select | ng-file-select="options" -->
            <p class="img-comment no-margin">
                <input ng-file-select type="file" multiple/>
            </p>

        </div>
    </div>

    <div class="row my-row-standard">

        <div class="col-xs-12" style="margin-bottom: 40px">

            <h3>The queue</h3>

            <p>Queue length: {{ uploader.queue.length }}</p>

            <table class="table">
                <thead>
                <tr>
                    <th width="50%">Name</th>
                    <th ng-show="uploader.isHTML5">Size</th>
                    <th ng-show="uploader.isHTML5">Progress</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="item in uploader.queue">
                    <td>
                        <strong>{{ item.file.name }}</strong>
                        <!-- Image preview -->
                        <!--auto height-->
                        <!--<div ng-thumb="{ file: item.file, width: 100 }"></div>-->
                        <!--auto width-->
                        <div ng-show="uploader.isHTML5" ng-thumb="{ file: item.file, height: 100 }"></div>
                        <!--fixed width and height -->
                        <!--<div ng-thumb="{ file: item.file, width: 100, height: 100 }"></div>-->
                    </td>
                    <td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
                    <td ng-show="uploader.isHTML5">
                        <div class="progress" style="margin-bottom: 0;">
                            <div class="progress-bar" role="progressbar"
                                 ng-style="{ 'width': item.progress + '%' }"></div>
                        </div>
                    </td>
                    <td class="text-center">
                        <span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
                        <span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
                        <span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
                    </td>
                    <td nowrap>
                        <button type="button" class="btn btn-success btn-xs" ng-click="item.upload()"
                                ng-disabled="item.isReady || item.isUploading || item.isSuccess">
                            <span class="glyphicon glyphicon-upload"></span> Upload
                        </button>
                        <button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()"
                                ng-disabled="!item.isUploading">
                            <span class="glyphicon glyphicon-ban-circle"></span> Cancel
                        </button>
                        <button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
                            <span class="glyphicon glyphicon-trash"></span> Remove
                        </button>
                    </td>
                </tr>
                </tbody>
            </table>

            <div>
                <p>
                    Queue progress:
                </p>

                <div class="progress" style="">
                    <div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div>
                </div>
                <button type="button" class="btn btn-success btn-s" ng-click="uploader.uploadAll()"
                        ng-disabled="!uploader.getNotUploadedItems().length">
                    <span class="glyphicon glyphicon-upload"></span> Upload all
                </button>
                <button type="button" class="btn btn-warning btn-s" ng-click="uploader.cancelAll()"
                        ng-disabled="!uploader.isUploading">
                    <span class="glyphicon glyphicon-ban-circle"></span> Cancel all
                </button>
                <button type="button" class="btn btn-danger btn-s" ng-click="uploader.clearQueue()"
                        ng-disabled="!uploader.queue.length">
                    <span class="glyphicon glyphicon-trash"></span> Remove all
                </button>
            </div>

        </div>

    </div>

    <my-goup-btn></my-goup-btn>

</div>